
<template>
  <div class="home">
    <!-- 顶部导航栏 -->

    <div class="nav">
      <van-icon name="location-o" />
      <van-search background="#f65655" v-model="value" placeholder="搜索你想住的区域或小区" />
      <van-icon name="chat-o" />
    </div>

    <!-- 首页轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <div class="btn">
      <ul>
        <li>找室友</li>
        <li>宜居社区</li>
      </ul>
    </div>

    <div class="hot">
      <h3>热门房源</h3>
      <ul v-for="image in images" :key="image">
        <li><img :src="image" /></li>
      </ul>
    </div>

      <Buttom></Buttom>
  </div>
</template>

<script >
import Buttom from '../components/Buttom'
import { ref } from "vue";
export default {
  name: "",
  setup() {
    const value = ref("");
    return { value };
  },
  data() {
    return {
      value: "",
      // 轮播图图片数据的定义
      images: [
        "http://iwenwiki.com/api/livable/banner/banner1.png",
        "http://iwenwiki.com/api/livable/banner/banner2.png",
        "http://iwenwiki.com/api/livable/banner/banner3.png",
      ],
    };
  },
  watch: {},
  props: {},
  components: {
      Buttom
  },
  computed: {},
  mounted() {},
  methods: {},
  filters: {},
};
</script>

<style scoped lang='css'>
/* 头部导航栏 */
.nav {
  display: flex;
  width: 100%;
  background-color: #f65655;
  justify-content: space-between;
  align-content: center;
}

.nav .van-search {
    width: 300px;
    padding: 8px 0;
}

.nav .van-icon {
    width: 37.5px;
    font-size: 24px;
    color: #fff;
}

.nav .van-icon::before {
    margin: 13px 0 0 0;
}

/* 轮播图 */
.my-swipe img {
  width: 100%;
}

.btn {
  margin: 12px 0 15px 0;
}

.btn ul {
  display: flex;
  justify-content: space-around;
}

.btn ul li {
  width: 173px;
  height: 65px;
  background-color: #f65655;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 8px;
  color: #fff;
}

.hot h3 {
  text-align: left;
  font-size: 7px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 10px;
}

.hot img {
  width: 100%;
}
</style>